<template>
	<div class="comment-viewer">
		<div class="comment-head">留言</div>
		<div v-if="commentInfo" class="product-comment">
			<div class="comment-content">
				<div class="citem" v-for="(item, index) in commentInfo" :key="index">
					<div class="citem-main">
						<div class="main-user" v-if="item.userInfo" >
							<img :src="item.userInfo.avatar">
							<div class="userInfo">
								<div class="userName">{{item.userInfo.nickname}}</div>
								<div class="time">{{item.userInfo.create_time}}</div>
								<div class="comment">{{item.content}}</div>
							</div>
						</div>
						<div class="citem-reply" @click="replyToComment(item.id)">回复</div>
					</div>
					<div class="sub-wrapper">
						<div class="citem-sub" v-for="(citem, cindex) in item.children" :key="cindex">
							<div class="sub-user">
								<img :src="citem.userInfo.avatar">
								<div class="userInfo">
									<div class="userName">{{citem.userInfo.nickname}}</div>
									<div class="time">{{citem.userInfo.create_time}}</div>
									<div class="comment">回复<span>{{item.userInfo.nickname}}</span>:{{citem.content}}</div>
								</div>
							</div>
							<div class="citem-reply" @click="replyToComment(citem.parent_id)">回复</div>
						</div>
					</div>
				</div>
			</div>	
		</div>
		<div v-else class="empty-tip">
			暂无留言
		</div>	
	</div>

</template>
<script>
	import commentApi from "@/api/comment"
	export default {
		data() {
			return {
				commentInfo: null
			}
		},
		props: ["id","showTalkBox","content","parentId"],//商品id 评论框显示 评论内容
		methods: {
			//获取评论
			getCommentInfo(itemId, typeId) {
				commentApi.getCommentInfo(itemId, typeId).then(res => {
					if (res) {
						console.log(res);
						this.commentInfo = res.list;
					}
				})
			},
			replyToComment(pId){
				this.$emit("getPId",pId);
				this.$emit("showBox");				
			},
			clearData(){
				this.commentInfo = null;
			},		
		},		
		created() {
			this.getCommentInfo(this.id, 1)
		},
		destroyed(){
			this.clearData();
		}
	}
</script>
<style lang="less" scoped>
	.comment-viewer{
		margin-top: 10px;
	}
	.comment-head {
		background-color: #fff;
		padding: 0 5px;
		font-weight: 700;
		line-height: 30px;
		text-align: left;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.product-comment {
		margin-bottom:50px;
		background-color: #fff;
		text-align: left;

		.citem {
			.citem-main {
				padding: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.main-user {
					display: flex;
					align-items: center;

					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin-right: 5px;
					}

					.userInfo {
						.time {
							color: #999;
							font-size: 14px;
						}

						.comment {
							color: #999;
							font-size: 14px;
							
						}
					}
				}
			}

			.sub-wrapper {
				padding-left: 30px;

				.citem-sub {
					padding-left: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10px;
					.sub-user{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin-right: 5px;
					}

					.userInfo {
						.time {
							color: #999;
							font-size: 14px;
						}

						.comment {
							color: #999;
							font-size: 14px;
							span{
								color:#03a9f4;
							}
						}
					}
				}
			}
		}
	}
	
	.empty-tip{
		background-color: #fff;
		color:#666666;
		height:80px;
		line-height: 80px;
	}
</style>
